<template>
    <div class="drawerContainer">
        <el-form :model="propJson" label-width="auto" style="width: 100%">
            <el-form-item label="绑定参数">
                <el-select v-model="propJson.bindVariable" placeholder="参数名称" style="width: 100%">
                    <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                </el-select>
            </el-form-item>

            <el-form-item label="尺寸">
                <el-radio-group v-model="propJson.size">
                    <el-radio label="default">默认</el-radio>
                    <el-radio label="large">大号</el-radio>
                    <el-radio label="small">小号</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="显示提示内容">
                <el-input v-model="propJson.placeHolder" style="width: 100%" placeholder="显示提示内容" />
            </el-form-item>

            <el-form-item label="是否禁用">
                <el-radio-group v-model="propJson.isDisable">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否支持清空">
                <el-radio-group v-model="propJson.isClearable">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否支持搜索">
                <el-radio-group v-model="propJson.isFilterable">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否支持多选">
                <el-radio-group v-model="propJson.isMultiple">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否折叠多选标签" v-if="propJson.isMultiple">
                <el-radio-group v-model="propJson.isCollapseTags">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否鼠标悬浮展示所有标签" v-if="propJson.isMultiple && propJson.isCollapseTags">
                <el-radio-group v-model="propJson.isCollapseTagsTooltip">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="标签折叠阈值" v-if="propJson.isMultiple && propJson.isCollapseTags">
                <el-input-number v-model="propJson.maxCollapseTags" :min="1"/>
            </el-form-item>

            <el-form-item label="下拉选择Label字段">
                <el-input v-model="propJson.optionLabel" style="width: 100%" placeholder="从对象中获取 $.label" />
            </el-form-item>

            <el-form-item label="下拉选择Value字段">
                <el-input v-model="propJson.optionValue" style="width: 100%" placeholder="从对象中获取 $.label" />
            </el-form-item>

            <el-form-item label="是否点击触发下拉">
                <el-radio-group v-model="propJson.isClickAction">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-divider>下拉选项值</el-divider>

            <CommonThirdServiceValue :actionInfo="propJson.actionInfo ? propJson.actionInfo : {}" :commonParam="commonParam" />

            <el-form-item label="是否添加下拉修改行为">
                <el-radio-group v-model="propJson.isAddChangeAction">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-divider v-if="propJson.isAddChangeAction">下拉修改行为</el-divider>

            <el-form-item label="是否重新加载页面" v-if="propJson.isAddChangeAction">
                <el-radio-group v-model="propJson.isReloadPage">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;" v-if="propJson.isAddChangeAction">
                <el-button type="primary" class="addCollapse" size="small" @click="addChangeAction()">添加下拉修改行为</el-button>
            </div>

            <div v-if="propJson.isAddChangeAction">
                <CommonThirdServiceAction :actionList="propJson.changeAction" :commonParam="commonParam" />
            </div>
        </el-form>
    </div>
</template>

<script name="SelectDrawer" setup lang="ts">
import CommonThirdServiceValue from "@/components/lowcode/service/CommonThirdServiceValue.vue";
import CommonThirdServiceAction from "@/components/lowcode/service/CommonThirdServiceAction.vue";
import {computed, defineProps} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode";

let props = defineProps(['commonParam']);

let commonParam = computed(() => {return props['commonParam']})

let propJson = computed(() => {return useLowCodeStore().lowCodeDrawerJsonInfo});

function addChangeAction() {
    if (!propJson.value.changeAction) {
        propJson.value.changeAction = []
    }
    let variableInfo = {variableName: "", variableValue: "", type: "variable", variableType: "String", variableParamName: "", apiMethod: "GET", responseType: "default", apiType: "MSOA", apiPath: "",
        isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
    propJson.value.changeAction.push(variableInfo)
}
</script>

<style scoped lang="less">

</style>